<%--
  Created by IntelliJ IDEA.
  User: 陈海彬
  Date: 2023/9/25
  Time: 15:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>键盘管理系统</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
    <style>
        body, * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        a {
            text-decoration: none;
            color: white;
        }

        .el-container {
            height: 100vh;
        }


        .el-aside {
            background-color: #525a62;
            color: #333;
            text-align: center;
            height: 97vh;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        /*设置二级菜单点击时的颜色*/
        .el-menu-item.is-active a {
            color: #ffd04b !important;
            font-weight: bold !important;
        }

        /*顶部栏*/
        .el-header {
            background-color: #23262e;
            color: #333;
            text-align: center;
            line-height: 60px;
            height: 2vh;
        }

        .header-left {
            float: left;
            line-height: 2vh;
        }

        .header-left img {
            height: 60px;
        }

        .header-center {
            display: inline;
            color: #2b6265;
            font-size: 48px;
        }

        .header-right {
            float: right;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="header-left">
                <img src="../../static/images/logo1.jpg" alt="">
            </div>
            <div class="header-center">{{staff.branchname}}</div>
            <%--下拉菜单--%>
            <el-dropdown class="header-right" @command="skipUrl">
                <div class="el-dropdown-link" style="display: flex;align-items: center">
                    <el-avatar style="margin:3px 5px 3px 0;"
                               :src="userInfo.url"></el-avatar>
                    <div>
                        <span>{{userInfo.staffname}}</span>
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </div>
                </div>

                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="toUserInfo">基本信息</el-dropdown-item>
                    <el-dropdown-item command="toUpdatePassWord">修改密码</el-dropdown-item>
                    <el-dropdown-item command="toLoginOut">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <%--左侧菜单--%>
            <el-aside width="200px">
                <el-menu
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-submenu style="padding: 0 10px" v-for="item in menuList" :key="item.mid"
                                :index="item.mid + ''">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{item.mname}}</span>
                        </template>
                        <%--遍历子菜单--%>
                        <el-menu-item style="font-size: 13px" v-for="child in item.children" :key="child.mid"
                                      :index="child.mid+''">
                            <template slot="title">
                                <a :href="'/'+child.murl" target="main" >
                                    <i :class="child.icon"></i>
                                    {{child.mname}}
                                </a>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main style="background: #fffcf5">
                <iframe name="main" :src="srcView" frameborder="0" width="100%" height="100%"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            menuList: [],//菜单信息列表
            userInfo: {},//用户信息
            staff: {},
            srcView: "/view/toMain",
        },
        created() {
            /*初始化菜单栏*/
            this.initMenu();
            /*初始化用户信息*/
            this.initInfo();
            this.getAllInfo();
        },
        methods: {
            /*初始化菜单栏*/
            initMenu() {
                let self = this;
                axios.get('/menu/leftMenu').then((res) => {
                    self.menuList = res.data.data;
                })
            },
            /*初始化用户信息*/
            initInfo() {
                let self = this;
                axios.get('/staff/info').then((res) => {
                    self.userInfo = res.data.data;
                })
            },
            getAllInfo() {
                axios.get('/main/getAllInfo').then(res => {
                    this.staff = res.data.data.staff;
                })
            },
            /*右上角跳转*/
            skipUrl(url) {
                this.srcView = url;
                // window.parent.frames.location.href = url
            },


        }
    })
</script>
</body>
</html>
